<!DOCTYPE html>
<html>   
	<meta charset="UTF-8">
	    <title>旋转按钮</title>
	    <style type="text/css">
		ul li {
			float: left;
			margin: 10px;
			list-style: none;

		}

		ul {
			padding-left: 5px;
		}

		#box img {
			transition: all 0.8s ease-in-out;
		}

		#box img:hover {
			transform: rotate(360deg) scale(1.2);

		}
	</style>
	</head>
	<body>
		<h2>顺时针旋转360度放大1.2倍</h2>
		<ul id="box">
			    <li><a href="#"><img src="../img/1.jpg" /></a></li>
			    <li><a href="#"><img src="../img/2.jpg" /></a></li>
			    <li><a href="#"><img src="../img/3.jpg" /></a></li>
			    <li><a href="#"><img src="../img/4.jpg" /></a></li>
			    <li><a href="#"><img src="../img/5.jpg" /></a></li>
		</ul>
	</body>
</html>